<template>
    <div class="master_order">
        <div class="order_head">
            <ol class="order_nav f30">
                <li v-for="(item, key) in (type == 3?orderNav:answer)" :key="key" @click="tab(item.state, item.type)" :class="(keys == item.state) ? 'on' : ''">{{item.name}}</li>
            </ol>
        </div>
        <div class="order_conten">
            <div class="order_conten_list" v-for="(item, key) in orderList" :key="key" >
                <dai-payment :item="item" v-if="type == '3'" ></dai-payment>
                <question :item="item" v-if="type == '1,2'"></question>
            </div>
            <blank v-if="isblank" :title="'暂无此类订单'"></blank>
        </div>
        <div class="cancel" v-if="ifcancel">
            <div class="cancel_confirm">
                <h3 class="f28">确定{{status}}订单?</h3>
                <textarea v-if="status == '拒接'" placeholder="拒绝接单原因(最多可输入100字)" maxlength="100" v-model="cause"></textarea>
                <div class="cancel_confir_mbtn">
                    <span class="f28" @click="qvxiao()">取消</span>
                    <span class="f28 blue" @click="cancelOrder()">确定</span>
                </div>
            </div>
        </div>
        <div class=""></div>
        <div v-if="orderList.length" class="gengduo" @click="gengduo">{{jiaMsg}}</div>
    </div>
</template>

<script>
    import daiPayment from '@/components/daiPayment'
    import question from '@/components/question'
    import Bus from '../../bus/bus.js'
    import blank from '@/components/masterInfo/blank'
    export default {
        name: 'masterOrder',
        components: {
            daiPayment,
            question,
            blank
        },
        data() {
            return {
                ifcancel: false,
                status: '接单',
                num: '',
                cause: '',
                isblank: false,
                orderNav: [
                    {
                        name: '待确认',
                        state: '2',
                        type: '3'
                    },
                    // {
                    //     name: '待解答',
                    //     state: '2',
                    //     type: '3'
                    // },
                    {
                        name: '进行中',
                        state: '3',
                        type: '3'
                    },{
                        name: '已完成',
                        state: '5',
                        type: '3'
                    },{
                        name: '全部',
                        state: '0',
                        type: '3'
                    }
                ],
                answer: [
                    {
                        name: '待确认',
                        state: '1',
                        type: '1,2',
                    },{
                        name: '待回复',
                        state: '8',
                        type: '1,2'
                    },{
                        name: '进行中',
                        state: '3',
                        type: '1,2'
                    },{
                        name: '已完成',
                        state: '5',
                        type: '1,2'
                    },{
                        name: '全部',
                        state: '0',
                        type: '1,2'
                    }
                ],
                orderList: [],
                type: this.$route.query.type,
                keys: this.$route.query.key,
                ind: 0,
                offset: 0,
                limit: 10,
                jiaMsg: '加载更多'
            }
        },
        comments() {

        },
        methods: {
            gengduo(){
                this.offset += this.limit;
                this.masterConsultanceList(this.$route.query.key)
            },
            getParameter() {
                console.log(this.$route.query.type)
                console.log(this.$route.query.key)
            },
            masterConsultanceList(s) {
                this.keys = s;
                let params = {
                    userId: this.$store.state.userId,
                    masterId: this.$store.state.masterId,
                    questionType: this.$route.query.type,
                    status: s,
                    offset: this.offset,
                    limit : this.limit
                }
                this.$http.fetchGet('masterConsultanceList', params).then(res => {
                    if(res.code == 200) {
                        // this.orderList = res.data
                        if(this.offset == 0) this.orderList = res.data;
                        else this.orderList.push(...res.data);
                        if(res.data.length == 0) this.offset -= this.limit;
                        if(this.orderList.length <= 0) {
                            this.isblank = true
                        } else {
                            this.isblank = false
                        }
                        if(res.data.length == 0) {
                            this.offset = 0
                            // this.$vux.toast.text('没有更多订单')
                            this.jiaMsg = '加载完毕'
                        }
                    } else {
                        // this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            tab(s, t) {
                this.offset = 0
                this.masterConsultanceList(s)
            },
            cancelOrder() { // 确认接单或删除
                if(this.status == '接单') {
                    this.acceptFqConsultance()
                } else if(this.status == '拒接') {
                    if(this.cause.replace(/(^\s+)|(\s+$)/g,"") != ''){
                        this.Addrefuse()
                    } else {
                        this.$vux.toast.text('请输入拒绝原因')
                    }
                }
            },
            acceptFqConsultance() { // 同意接单
                let params = {
                    masterid: this.$store.state.masterId,
                    consultanceid: this.num,
                }
                this.$http.fetchGet('acceptFqConsultance', params).then(res => {
                    if(res.code == 200) {
                        this.$vux.toast.text('接单完成')
                        this.ifcancel = false
                        this.masterConsultanceList()
                    } else {
                        // this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            Addrefuse() { // 拒绝接单
                let params = {
                    consultanceid: this.num,
                    commentText: this.cause
                }
                this.$http.fetchGet('Addrefuse', params).then(res => {
                    if(res.code == 200) {
                        this.ifcancel = false
                        this.$vux.toast.text('拒接成功')
                        this.masterConsultanceList()
                    } else {
                        console.log(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            qvxiao() { // 取消接收或删除
                this.ifcancel = false
            }
        },
        mounted() {
            this.masterConsultanceList(this.$route.query.key)
            Bus.$on('accept', (e) => {
                this.status = e.type
                this.ifcancel = true
                this.num = e.consultanceid
            })
        }
    }
</script>

<style lang="less" scoped>
    .master_order{
        position: absolute;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        background: #f2f2f2;
        width: 100%;
        .pt(88);
        .order_head{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            .order_nav{
                display: flex;
                border-bottom: 1px solid #f2f2f2;
                box-sizing: border-box;
                background: #fff;
                li{
                    flex: 1;
                    .h(88);
                    .lh(88);
                    text-align: center;
                    color: #333;
                    box-sizing: border-box;
                }
                .on{
                    color: #189BEB;
                    border-bottom: 2px solid #189BEB;
                }
            }
        }
        .cancel{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            border-bottom: 1px solid #f2f2f2;
            .cancel_confirm{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .w(620);
                .pb(100);
                background: #fff;
                border-radius: 5px;
                h3{
                    text-align: center;
                    .lh(80);
                    .pt(20);
                    color: #666;
                    font-weight: normal;
                }
                p{
                    text-align: center;
                    .lh(60);
                    color: #666;
                }
                .cancel_confir_mbtn{
                    width: 100%;
                    display: flex;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        border-top: 1px solid #f2f2f2;
                        color: #333;
                        &:last-child{
                            border-left: 1px solid #f2f2f2;
                        }
                    }
                    .blue{
                        color: #189BEB;
                    }
                }
                textarea{
                    border: none;
                    border: 1px solid #ccc;
                    .w(400);
                    .lh(40);
                    .h(88);
                    .p(10);
                    display: block;
                    margin: 0 auto;
                    resize:none;
                    outline:none;
                    border-radius: 5px;
                    overflow-y:visible;
                }
            }
        }
        .gengduo{
            text-align: center;
            .lh(88);
            color: #189BEB;
        }
    }
</style>
 